﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>In this example is demonstrated how to use the jqxListBox with Search field. ListBox is automatically updated when at least two characters are entered into the search field.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();

            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                url: "http://ws.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        data.name_startsWith = $("#searchField").val();
                        return data;
                    }
                }
            );

            $("#jqxlistbox").jqxListBox(
            {
                width: 280,
                height: 250,
                source: dataAdapter,
                theme: theme,
                selectedIndex: 0,
                displayMember: "name",
                valueMember: "countryName",
                renderer: function (index, label, value) {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = item.name + ", " + item.countryName + ", " + item.adminName1;
                        return label;
                    }
                    return "";
                }
            });

            var me = this;
            $("#searchField").bind('keydown', function (event) {
                if ($("#searchField").val().length >= 2) {
                    if (me.timer) clearTimeout(me.timer);
                    me.timer = setTimeout(function () {
                        dataAdapter.dataBind();
                    }, 300);
                }
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div>
          <span style='float: left; margin-top: 5px; margin-right: 4px;'>Search: </span>
          <input class='jqx-input' id='searchField' type="text" style="height: 23px; float: left; width: 223px;" /> 
        </div>
        <div style="clear: both;"></div>
        <div style="margin-top: 10px;" id="jqxlistbox"></div>
    </div>
</body>
</html>
